<template>
    <div class="grade">
       <div class="grade-header">
          <div class="my-grade-headline">我的等级：</div>
          <div class="my-grade">高级</div>
          <div class="grade-wonder-date">
            <div class="my-wonder">魅力值：910</div>
            <div class="grade-date">取值周期：2020.05.09-2020.05.23</div>
          </div>
       </div>
      <div class="grade-waist">
        <div class="grade-test-headline">距离下次考核</div>
        <van-count-down :time="time" class="grade-test-time"  format="DD 天 HH 时 mm 分 ss 秒" />
        <div class="grade-info">
            <div class="grade-info-wonder">实时魅力值：910</div>
            <div class="grade-info-ranking">实时排名：1</div>
            <div class="grade-prev-ranking">第4名订单金额：1000</div>
        </div>
      </div>
      <div class="grade-footer">
          <div class="footer-top">
             <div class="grade-rule">考核规则</div>
            <div class="grade-rule-info">
              <div class="grade-rule-info-list">考核时间：每周六 23:59</div>
              <div class="grade-rule-info-list">数值取值：近14天订单金额</div>
              <div class="grade-rule-info-list">说明：根据店员近14天魅力值排名，取1-7名为特级，8-14名为高级，其他为中级。</div>
            </div>
          </div>
          <div class="footer-bottom">
              <div class="grade-privilege-headline">等级特权</div>
              <ul class="grade-privilege">
                <li class="grade-privilege-list">
                  <div class="icon iconfont icon-v-copy grade-privilege-list-icon"></div>
                  <div class="grade-privilege-list-word">等级标识</div>
                </li>
                <li class="grade-privilege-list">
                  <div class="icon iconfont icon-youzhi grade-privilege-list-icon"></div>
                  <div>优先展示</div>
                </li>
                <li class="grade-privilege-list">
                  <div class="icon iconfont icon-gao grade-privilege-list-icon"></div>
                  <div>服务价格</div>
                </li>
              </ul>
          </div>
      </div>
    </div>
</template>

<script>
  import Vue from 'vue';
  import { CountDown } from 'vant';

  Vue.use(CountDown);
    export default {
        name: "Grade",
        data: function() {
          return {
            time: 30 * 60 * 60 * 1000
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
   .grade
     .grade-header
       width calc(100% - .6rem)
       height 3.57rem
       padding .3rem .3rem .74rem .3rem
       background-color #CED1EF
       display flex
       flex-direction column
       justify-content space-between
       .my-grade-headline
         font-size .26rem
         color $DefaultTextColor
       .my-grade
         font-size .5rem
         color $DefaultTextColor
         center()
       .grade-wonder-date
         .my-wonder
           font-size .2rem
           color $DefaultTextColor
           padding-bottom .1rem
         .grade-date
           font-size .2rem
           color $DefaultTextColor
     .grade-waist
       margin 0 .3rem
       border-radius .1rem
       height 2.16rem
       between()
       flex-direction column
       position relative
       top -.3rem
       padding .3rem
       background-color #fff
       .grade-test-headline
         color #999
         font-size .26rem
       .grade-test-time
         font-size .36rem
         center()
         color $DefaultTextColor
       .grade-info
         between-align-items()
         .grade-info-wonder
           font-size .2rem
         .grade-info-ranking
           font-size .2rem
         .grade-prev-ranking
           font-size .2rem
     .grade-footer
       margin 0 .3rem
       border-radius .1rem
       between()
       flex-direction column
       padding .3rem
       background-color #fff
       .footer-top
         .grade-rule
           font-size .26rem
           color #999
         .grade-rule-info
           padding-top .3rem
           .grade-rule-info-list
             font-size .2rem
             color #333
             line-height .35rem
       .footer-bottom
         .grade-privilege-headline
           font-size .26rem
           color #999
           padding .3rem 0
         .grade-privilege
           between-align-items()
           .grade-privilege-list
             .grade-privilege-list-icon
               font-size .45rem
               color #CED1EF
               center()
               margin-bottom .21rem
             .grade-privilege-list-word
               center()














</style>
<style>

</style>
